<template>
  <dv-border-box-8 :reverse="true">
    <!-- 初始化ECharts容器，ref属性用于获取标签 -->
    <div ref="charts" style="width: 100%; height: 450px"></div>
  </dv-border-box-8>
</template>

<script>
// 导入 ECharts
import * as echarts from 'echarts'
// 导入中国地图的 json 数据
import chinaMap from '@/assets/json/china.json'

export default {
  name: 'ECharts',
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      var myChart = echarts.init(this.$refs.charts)
      echarts.registerMap('china', chinaMap) // 初始化地图时必须要添加

      var option = {
        geo: {
          show: true,
          type: 'map',
          map: 'china',
          zoom: 1.2, // 地图默认的缩放等级
          // 文字相关的配置
          label: {
            show: true,
            color: '#fff',
            fontSize: 10
          },
          // 多边形相关配置
          itemStyle: {
            areaColor: '#3056ce',
            borderWidth: 0.5
            // borderColor: '#999'
          },
          // 鼠标移入，高亮状态
          emphasis: {
            label: {
              show: true,
              color: '#fff',
              fontSize: 14
            },
            itemStyle: {
              areaColor: '#f60'
            }
          }
        },
        series: {
          type: 'effectScatter', // 带有涟漪特效动画的散点（气泡）图
          coordinateSystem: 'geo', // 设置坐标系统
          // 涟漪特效相关配置
          rippleEffect: {
            number: 3,
            period: 4,
            brushType: 'stroke',
            scale: 5
          },
          // 文字样式
          label: {
            normal: {
              show: true,
              position: 'right'
            }
          },
          // 图形样式
          itemStyle: {
            color: '#f60'
          },
          symbol: 'circle', // 标记的样式
          // 标记的大小
          symbolSize: function (val) {
            return val[2]
          },
          data: [
            {
              name: '武汉',
              value: [114.31, 30.52, 20]
            },
            {
              name: '长沙',
              value: [113, 28.21, 5]
            },
            {
              name: '大连',
              value: [121.62, 38.92, 15]
            },
            {
              name: '西宁',
              value: [101.74, 36.56, 5]
            }
          ]
        }
      }

      myChart.setOption(option)
    }
  }
}
</script>
